<template>
    <div class="Comment-Admin">
        <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition>
        <h1>评论管理</h1>
        <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%">
            <el-table-column
                    type="id"
                    width="10">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    property="userName"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    property="userEmail"
                    label="邮箱"
                    width="180">
            </el-table-column>
            <el-table-column
                property="content"
                label="内容"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    property="blogTitle"
                    label="博客名称"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    label="状态"
                    property="status"
                    width="100">
                <template slot-scope="scope">
                    <span style="color: #e4c600" v-if="scope.row.status === 0">未审核</span>
                    <span style="color: #94ce6f" v-if="scope.row.status === 1">已通过</span>
                    <span style="color: #bf2762" v-if="scope.row.status === 2">未通过</span>
                    <span style="color: #b8b8ba" v-if="scope.row.status === 3">已删除</span>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button type="primary" round  @click="moreComment" v-show="this.showButton">加载更多</el-button>
            <el-button @click="acComment(1)" type="success" plain v-bind:disabled="showAdminPass">通过</el-button>
            <el-button @click="acComment(2)" type="success" plain v-bind:disabled="showAdminNotPass">不通过</el-button>
            <el-button @click="deleteComment" type="danger" plain v-bind:disabled="showAdminDelete">删除</el-button>
            <el-button @click="giveupChoose" type="info" plain v-bind:disabled="showAdminCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
    import Loading from '../components/loading'
    export default {
        name: "CommentAdmin",
        components:{ Loading  },
        data() {
            return {
                tableData: [],
                blogs:[],
                currentRow: null,
                showButton:true,
                pageNum:1,
                pageIndex:1,
                pageSize:5,
                showAdminPass:true,
                showAdminNotPass:true,
                showAdminDelete:true,
                showAdminCancel:true,
                isLoading:true,
            }
        },
        methods:{
            getAcComments(user){
                return this.axios.get('/getAllComments',
                    {
                        params: {
                            pageNum:this.pageNum,
                            username:user.username,
                            password:user.password
                        }
                    })
            },
            getBlogId(blogId){
                return this.axios.get('/readBlog',
                    {
                        params: {
                            blogId:blogId
                        }
                    })
            },
            acComment(type) {
                if(this.currentRow!==null){
                    this.axios.patch('/comment/' + this.currentRow.id + '/' + type).then((res)=>{
                        if (res.data.code === 200) {
                            if (type === 1) {
                                this.$message.success("评论已通过执行成功");
                            } else if (type === 2) {
                                this.$message.success("评论未通过执行成功");
                            }
                            setTimeout(function(){
                                location.reload();   //可以是一句或是很多句代码，也可以是个函数
                            },1000); //延时1秒
                        } else {
                            this.$message.error(res.data.data());
                        }
                    })
                }else{
                    this.$message({
                        showClose: true,
                        message: '还未选择任何评论',
                        type: 'warning'
                    });
                }

            },
            deleteComment(){
                if(this.currentRow.id!==null){
                    this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.axios.delete('/comment/' + this.currentRow.id).then((res)=>{
                            if (res.data.code === 200 && res.data.data === 1) {
                                this.$message.success("删除成功!");
                                setTimeout(function(){
                                    location.reload();   //可以是一句或是很多句代码，也可以是个函数
                                },1000); //延时1秒
                            } else {
                                this.$message.error("删除失败!");
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$message({
                        showClose: true,
                        message: '还未选择任何评论',
                        type: 'warning'
                    });
                }
            },
            giveupChoose(){
                this.currentRow=null
                this.$refs.singleTable.setCurrentRow();
                this.showAdminPass = true;
                this.showAdminDelete = true;
                this.showAdminCancel = true;
            },
            handleCurrentChange(val) {
                this.currentRow=val
                if (val.status === 0) {
                    this.showAdminPass = false;
                    this.showAdminNotPass = false;
                    this.showAdminDelete = false;
                    this.showAdminCancel = false;
                } else if (val.status === 1 || val.status === 2) {
                    this.showAdminPass = true;
                    this.showAdminNotPass = true;
                    this.showAdminDelete = false;
                    this.showAdminCancel = false;
                } else if (val.status === 3) {
                    this.showAdminPass = true;
                    this.showAdminNotPass = true;
                    this.showAdminDelete = true;
                    this.showAdminCancel = false;
                }
            },
            moreComment(){
                this.axios.post('/comment/paging',
                    {
                        blogId:0,
                        pageIndex:this.pageIndex++,
                        pageSize:this.pageSize,
                        status:-1
                    }).then((res)=>{
                    const data = res.data;
                    if (data.code === 200) {
                        this.tableData = this.tableData.concat(data.data.list);
                        if (data.data.pageIndex === data.data.totalPage) {
                            this.showButton = false;
                        }
                    } else {
                        this.$message.error(data.data);
                    }
                })
            }
        },
        created() {
            this.axios.post('/comment/paging',
                {
                    blogId:0,
                    pageIndex:this.pageIndex++,
                    pageSize:this.pageSize,
                    status:-1
                }).then((res)=>{
                const data = res.data;
                if (data.code === 200) {
                    this.tableData = data.data.list;
                    if (data.data.pageIndex === data.data.totalPage) {
                        this.showButton = false;
                    }
                } else {
                    this.$message.error(data.data);
                }
            })
            this.isLoading = false;
        },
        mounted() {
            //判断所有资源是否加载完毕
            var _this = this
            var timer = setInterval(function () {
                // 判断文档和所有子资源(图片、音视频等)已完成加载
                if (document.readyState === 'complete') {
                    //执行方法
                    _this.isLoading=false
                    window.clearInterval(timer)
                }
            }, 500)
        }
    }
</script>

<style scoped>
.Comment-Admin{
    margin: 0 auto;
    max-width: 960px;
    text-align: center;
}
@media screen and (max-width: 500px) {
    .el-message {
        min-width: 300px !important;
    }
}
@media screen and (max-width: 500px) {
    .el-message-box{
        width: 300px !important;
    }
}
</style>
